<template>
  <div class="search">
    <el-row :gutter="10" align="center" type="flex">
      <el-col :lg="5" :md="5" :sm="5" :xl="5" :xs="5">
        <el-input v-model="searchVal.loginName" class="search-input" clearable placeholder="请输入账号名称..."/>
      </el-col>
      <el-col :lg="5" :md="5" :sm="5" :xl="5" :xs="5">
        <el-input v-model="searchVal.businessName" class="search-input" clearable placeholder="请输入商家名称..."/>

      </el-col>
      <el-col :lg="5" :md="5" :sm="5" :xl="5" :xs="5">
        <el-input v-model="searchVal.businessNo" class="search-input" clearable placeholder="请输入商户号..."/>
      </el-col>
      <el-col :lg="5" :md="5" :sm="5" :xl="5" :xs="5">
        <el-cascader
            v-model="searchVal.sq"
            :options="multiple"
            :props="multipleProps"
            :show-all-levels="false"
            clearable
            placeholder="状态"

        ></el-cascader>
      </el-col>
      <el-col :lg="4" :md="4" :sm="4" :xl="4" :xs="4">
        <el-button type="primary" @click="getSearchVal">搜索</el-button>
        <el-button type="danger" @click="resetSearch">重置</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import utils from "@/utils";

export default {
  name: "Search",
  components: {},
  data() {
    return {
      searchVal: {
        businessName: "",
        loginName: "",
        businessNo: "",
        sq: "",
      },
      multipleProps: {
        emitPath: false,
        label: 'text',
      },

      multiple: [{
        value: 'zhinan',
        text: '指南',
        children: [{
          value: 'shejiyuanze',
          text: '设计原则',
          children: [{
            value: 'yizhi',
            text: '一致'
          }, {
            value: 'fankui',
            text: '反馈'
          }, {
            value: 'xiaolv',
            text: '效率'
          }, {
            value: 'kekong',
            text: '可控'
          }]
        }]
      },]
    }
  },
  computed: {},
  methods: {
    //获取搜索内容
    getSearchVal() {
      if (!this.searchValIsEmpty(this.searchVal)) return this.$message.error("搜索不能为空")
      this.$emit('searchVal', this.searchVal)
    },
    //重置搜索内容
    resetSearch() {
      if (!this.searchValIsEmpty(this.searchVal)) return this.$message.warning('没有可重置的内容')
      Object.assign(this.$data, this.$options.data())
      this.$emit('resetSearch')
    },
    searchValIsEmpty(obj = {}) {
      return Object.keys(obj).some(key => obj[key] && obj[key].length > 0)
    },
  },
  created() {
  },
  mounted() {
  },
};


</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .search-input {
    width: 100%;
  }
}
</style>
